<template>
	<view 
		class="mix-btn-content" 
		:class="{
				disabled: loading || disabled || dead, 
			}"
		:style="[
			{marginTop: marginTop}
		]"
		@click="confirm"
	>
		<image v-if="loading" class="loading-icon" src=""></image>
		<text v-if="icon" class="mix-icon" :class="icon" :style="{fontSize: iconSize + 'rpx'}"></text>
		<text class="mix-text">{{ text }}</text>
	</view>
</template>

<script>
	/**
	 * 按钮组件
	 * @prop text 按钮显示文字
	 * @prop icon 按钮图标
	 * @prop iconSize 按钮显示文字
	 * @prop isConfirm 点击后是否处理loading状态
	 * @prop disabled 按钮禁用
	 * @prop marginTop 按钮上边距
	 */
	let stopTimer = null;
	export default {
		name: 'MixButton',
		data() {
			return {
				dead: false,
				loading: false
			};
		},
		props: {
			text: {
				type: String,
				default: '提交'
			},
			icon: {
				type: String,
				default: ''
			},
			iconSize: {
				type: Number,
				default: 32
			},
			isConfirm: {
				type: Boolean,
				default: true
			},
			disabled: {
				type: Boolean,
				default: false
			},
			marginTop: {
				type: String,
				default: '0rpx'
			}
		},
		methods: {
			stop(){
				if(stopTimer){
					clearTimeout(stopTimer);
					stopTimer = null;
				}
				this.loading = false;
			},
			death(){
				this.loading = false;
				this.dead = true;
			},
			confirm(){
				if(this.dead){
					return;
				}
				if(this.loading || this.disabled){
					return;
				}
				if(this.isConfirm){
					this.loading = true;
					
					stopTimer = setTimeout(()=>{
						this.loading = false;
						clearTimeout(stopTimer);
						stopTimer = null;
					}, 10000)
				}
				this.$emit('onConfirm');
			}
		}
	}
</script>

<style scoped lang='scss'>
	.mix-btn-content{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 610rpx;
		height: 88rpx;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fff;
		border-radius: 100rpx;
		background-color: $base-color;
		position: relative;
		
		&:after{
			content: '';
			position: absolute;
			left: 50%;
			top: 25%;
			transform: translateX(-50%);
			width: 85%;
			height: 85%;
			background: linear-gradient(131deg, rgba(255,115,138,1) 0%, rgba(255,83,111,1) 100%);
			border-radius: 100rpx;
			opacity: 0.4;
			filter:blur(10rpx);
		}
		&.disabled {
			opacity: .65;
		}
		.mix-text{
			position: relative;
			z-index: 1;
		}
		.mix-icon{
			position: relative;
			z-index: 1;
			margin-right: 8rpx;
		}
		.loading-icon{
			width: 34rpx;
			height: 34rpx;
			transform-origin:50% 50%;
			margin-right: 16rpx;
			animation: rotate 2s linear infinite;
			position: relative;
			z-index: 1;
		}
	}
	@keyframes rotate{
		from {
			transform:rotate(0deg)
		}
		to {
			transform:rotate(360deg)
		}
	}
</style>
